<template>
    <div
        class="cashInstApply"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="现金分期申请">
            <template slot="cardBody">
                <div class="formContainer">
                    <div v-show="!cardinfo_4075">
                        <el-form
                            class="editForm"
                            ref="editForm"
                            :model="formData"
                            label-position="right"
                            :rules="formRules"
                            size="small"
                            label-width="180px"
                        >
                            <el-row>
                                <el-col :span="10" :offset="1">
                                    <div class="text_center width40">
                                        <el-form-item label="账户类别:" label-position="left">
                                            <el-input v-model="accountType" disabled></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="11">
                                    <div class="text_center width40">
                                        <!-- <el-form-item label="主卡卡号:" label-position="left">
                                            <el-input v-model="formData.CARDNBR" disabled></el-input>
                                        </el-form-item>-->
                                        <el-form-item label="主卡卡号:" class="text_fl">
                                            <el-select
                                                v-model.trim="formData.CARDNBR"
                                                placeholder="请选择卡号"
                                                disabled
                                            >
                                                <el-option
                                                    v-for="item in cardList_option"
                                                    :label="item.CARDNBR"
                                                    :value="item.CARDNBR"
                                                    :key="item.CARDNBR"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10" :offset="1">
                                    <div class="text_center width40">
                                        <el-form-item label="可分期额度:" label-position="left">
                                            <el-input v-model="CALAVAL" disabled></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="11">
                                    <div class="text_center width40">
                                        <el-form-item
                                            label="分期计划编号:"
                                            label-position="left"
                                            prop="CREDNO"
                                        >
                                            <el-select
                                                placeholder="请选择分期计划编号"
                                                clearable
                                                v-model="formData.CREDNO"
                                                @change="getCREDNOValue"
                                                disabled
                                            >
                                                <el-option
                                                    v-for="(item, index) in CREDNOLIST"
                                                    :key="index"
                                                    :label="item.code + ' -- ' + item.label"
                                                    :value="item.code"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="10" :offset="1">
                                    <div class="text_center width40">
                                        <el-form-item
                                            label="分期金额:"
                                            label-position="left"
                                            prop="MPAMT"
                                        >
                                            <el-input
                                                placeholder="请输入分期金额"
                                                maxlength="8"
                                                v-model="formData.MPAMT"
                                                @blur="handleGetComputeMPAMT"
                                            ></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="11">
                                    <div class="text_center width40">
                                        <el-form-item
                                            label="分期期数:"
                                            label-position="left"
                                            prop="NBRMTHS"
                                        >
                                            <el-select
                                                placeholder="请选择转分期期数"
                                                clearable
                                                filterable
                                                value-key="MPMONTH"
                                                v-model="formData.NBRMTHS"
                                                @change="handleGetComputeMP"
                                            >
                                                <el-option
                                                    v-for="item in MPMONTH_Option"
                                                    :key="item.MPMONTH"
                                                    :label="item.label"
                                                    :value="item"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="23" :offset="1">
                                    <div class="text_center width40">
                                        <el-form-item
                                            label="申请转入的银行卡卡号:"
                                            label-position="left"
                                            prop="OUTCARDNBR"
                                        >
                                            <el-input
                                                v-model="formData.OUTCARDNBR"
                                                @blur="checkagain"
                                            ></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="23" :offset="1">
                                    <div class="text_center">
                                        <el-form-item label="费用试算表:" label-position="left">
                                            <!-- <span class="el-form-item-span">{{Trial_table}}</span> -->
                                            <template>
                                                <el-table
                                                    :data="Trial_table"
                                                    border
                                                    stripe
                                                    style="width:100%"
                                                    class="el-table heard-bg"
                                                >
                                                    <el-table-column
                                                        label="总还款额"
                                                        prop="totalRepayment"
                                                    ></el-table-column>
                                                    <el-table-column
                                                        label="总手续费"
                                                        prop="totalHandling"
                                                    ></el-table-column>
                                                    <el-table-column
                                                        label="每月本金"
                                                        prop="monthsPrincipal"
                                                    ></el-table-column>
                                                    <el-table-column
                                                        label="每月手续费"
                                                        prop="monthlyService"
                                                    ></el-table-column>
                                                    <el-table-column
                                                        label="每月还款额"
                                                        prop="monthlyPayment"
                                                    ></el-table-column>
                                                </el-table>
                                            </template>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <!-- 话术 -->
                            <div class="hstable_wrap" v-if="speechList.length!=0">
                                <el-table
                                    :data="speechList"
                                    border
                                    stripe
                                    header-row-class-name="headerRow"
                                    ref="showListTable"
                                    class="heard-bg business_table hstable"
                                    @selection-change="handleSelectionChange"
                                >
                                    <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                                    <el-table-column label="业务话术">
                                        <template slot-scope="scope">{{scope.row.content}}</template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <el-row class="buttonBox">
                                <el-button type="primary" size="small" @click="checkAcct">借记卡校验</el-button>
                                <el-button
                                    type="primary"
                                    size="small"
                                    @click="handleSubmit"
                                    :disabled="(!ifcheckacct)||checkflag"
                                >申 请</el-button>
                                <el-button
                                    type="primary"
                                    size="small"
                                    @click="handleClicksuInfo"
                                >多期数试算结果</el-button>
                                <!-- <el-button 
                                    type="primary"
                                    plain
                                    size="small"
                                    @click="handleTurnPage"
                                >现金分期资料修改</el-button>-->
                            </el-row>
                        </el-form>
                    </div>
                    <!-- 表单模块 -->
                    <div v-if="cardinfo_4075">
                        <cash-inst-apply-item :SUCCESSDATA="cardinfo_4075"></cash-inst-apply-item>
                    </div>

                    <el-dialog
                        v-drag
                        title="多期数试算结果"
                        :visible.sync="DialogVisible"
                        width="1100px"
                        :append-to-body="true"
                        top="20vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <trialbalance :TrialDataList="TrialDataList"></trialbalance>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                type="primary"
                                size="small"
                                @click="DialogVisible = false"
                            >关 闭</el-button>
                        </span>
                    </el-dialog>
                    <el-dialog
                        v-drag
                        title="现金分期申请确认"
                        :visible.sync="DialogVisibleSuccess"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            卡号：
                            <span>{{formData.CARDNBR}}</span>
                        </p>
                        <p>
                            分期金额：
                            <span>{{formData.MPAMT}}</span>
                        </p>
                        <p>
                            分期期数：
                            <span>{{MPMONTH_Option_one.MPMONTH}}</span>
                        </p>
                        <p>
                            分期费率：
                            <span>{{MPMONTH_Option_one.MPFEE|formatfee}}</span>
                        </p>
                        <p>
                            总手续金额：
                            <span>{{totalHandling_Value}}</span>
                        </p>
                        <p>
                            本金+手续费总额：
                            <span>{{formData.MPAMT*1+totalHandling_Value*1}}</span>
                        </p>
                        <!-- <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">确认</span>
                        </p>-->
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="DialogVisibleSuccess = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="getCashLoanFun"
                                icon="el-icon-circle-check"
                                v-preventReClick
                            >确定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import {
    getInstalmentList,
    getAccountTypeName,
    getDictSelectList,
    closePage,
    getDictMappingValue,
    getCardInfo3004,
    getNewCUPAYM24
} from '@/utils/Common';
// import { BANK_LIST } from '@/utils/Contants';
import { RegConfig } from '@/utils/RegConfig';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import CashInstApplyItem from './components/CashInstApplyItem';
import Trialbalance from '@/components/TrialBalance/Trialbalance';

export default {
    name: 'cashInstApply',
    components: {
        cardComponent,
        CashInstApplyItem,
        Trialbalance,
    },
    data() {
        const validatorPass = (rule, value, callback) => {
            const MPAMT_value = Number(value);
            console.log('MPAMT_value', MPAMT_value);
            console.log('this.aval', this.CALAVAL);
            if (MPAMT_value < 2000) {
                callback(new Error('分期金额不能小于2000，请重新输入!'));
            } else if (MPAMT_value > 300000) {
                callback(new Error('分期金额不能超过30万，请重新输入!'));
            } else {
                if (MPAMT_value % 100 !== 0) {
                    callback(new Error('分期金额必须是100元整数倍增加，请重新输入!'));
                } else {
                    if (parseFloat(value) > parseFloat(this.CALAVAL)) {
                        callback(new Error('分期金额不能超过可分期额度，请重新输入!'));
                    } else {
                        callback();
                    }
                }
            }
        };
        return {
            accountType: '', // 账户类别
            CALAVAL: 0, // 可用额度
            pageLoading: false, // 页面loading
            isShowDialog: false, // 对话框显示控制阀
            bankTypeList: [], // 申请转移的银行卡类型 下拉选择列表

            // 表单字段校验规则
            formRules: {
                CREDNO: [
                    { required: true, message: '请选择信用计划编号', trigger: 'change' },
                ],
                MPAMT: [
                    { required: true, message: '请输入分期金额', trigger: 'blur' },
                    { pattern: RegConfig.amount, message: '请输入正确的金额', trigger: 'blur' },
                    { validator: validatorPass, trigger: 'blur' },
                ],
                NBRMTHS: [
                    { required: true, message: '请选择分期期数', trigger: 'change' },

                ],
                OUTCARDNBR: [
                    { required: true, message: '申请转入的银行卡卡号不能为空', trigger: 'change' },
                ],
            },

            instalmentNoList: [], // 分期期数 下拉选择列表
            formData: { // 搜索表单字段
                CREDNO: '', // 信用计划编号
                MPAMT: '', // 分期金额
                NBRMTHS: '', // 分期期数
                LOADFLAG: true, // 放款方式
                OUTCARDNBR: '',//申请转入的银行卡卡号
                // MPFEE_CD: '', // 分期利率
            },
            showComputedData: [], // 金额计算展示数据
            DialogVisible: false,//
            DialogVisibleSuccess: false,//
            MPMONTH_list: '',//分期期数列表
            // MPFEE_list: '',//费率
            CASHPLAN_value: '',//现金分期计划编号
            PMmethod_list: '',// 手续费支付方式
            MPMONTH_Option: [],//分期期数下拉
            CREDNOLIST: [], // 信用计划编号 下拉选择列表
            Trial_table: [],//试算结果展示
            MPMONTH_Option_one: '',//选中的费率
            totalHandling_Value: '',//总手续费
            cardinfo_4075: '',//
            Card_STAT: '',//
            PRODUCT_value: '',//
            TrialDataList: [],//费率表数据
            CUPAYM24: '',// 24期逾期字段表
            CustomerInfo_3052: '',//3052
            newCardInfo_3004: '',//每次换卡的默认卡信息
            cardList_option: '',//当前账户下的所有的卡
            IccMpprm: '',//分期计划数据
            checkflag: false,//申请按钮是否可用
            ifcheckacct: false,//是否已校验才储蓄卡号
            speechList: [],//话术列表
            selectedList: [],
            MenuId: '',
            outCard: '',
        };
    },

    filters: {
        // 申请转移的银行卡类型 -> 转译
        getTypeText(val, bankTypeList) {
            let text = '';
            bankTypeList.forEach((item) => {
                if (item.code === val) {
                    text = item.label;
                }
            });
            return text;
        },
        formatfee(val) {
            let txt = '';
            txt = parseFloat(val * 100).toFixed(2) + '%';
            return txt;
        },
    },
    // 取缓存信息
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'cardAccountInfo_3001',
            'defaultParams',
            'pinFlag',
            'cardList_3601',
            'CreditCardHistory_3054',
            'CreditCardService_3014',
            'isCurrentMenuInfo',
        ]),
    },

    async mounted() {
        this.MenuId = this.$route.params.id || '';
        this.setDefaultCardInfo();
        this.pageLoading = true;
        this.CUPAYM24 = await getNewCUPAYM24(this.CreditCardHistory_3054.CUPAYM24);
        await this.getDictInfovalue();
        console.log('this.formData.CREDNO', this.formData.CREDNO);
        console.log('this.CREDNOLIST[0].code', this.CREDNOLIST[0].code);
        await this.getInitData(this.CREDNOLIST[0].code);
        this.splitStringValue();
        await this.getCustomerInfo3052();
        await this.getspeechList();

    },
    methods: {
        // 修改默认卡
        setDefaultCardInfo() {
            if (!this.newCardInfo_3004) {
                this.newCardInfo_3004 = JSON.parse(JSON.stringify(this.cardInfo_3004));
            };
        },
        async getNew3004() {
            console.log('getNew3004', this.newCardInfo_3004.CARDNO);
            this.formData.CARDNBR = this.newCardInfo_3004.CARDNO;
            this.formData.CATEGORY = this.newCardInfo_3004.CATEGORY + '' || '';//账户类别
            this.Card_STAT = (this.cardInfo_3004.CARDSTAT + '').trim();
            // 卡产品
            this.PRODUCT_value = await getDictMappingValue('PRODUCT', this.newCardInfo_3004.PRODUCT, this);
            this.accountType = await getAccountTypeName(this.cardList_3601, this.newCardInfo_3004, this);

        },
        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            var checkParam = {
                'id': this.MenuId || this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        // 请求数据字典里的字段
        async getDictInfovalue() {
            await this.getNew3004();
            // 获取账户类别
            // 现金分期计划编号
            this.CREDNOLIST = await getDictSelectList('CASHPLAN', this);
            console.log("this.CREDNOLIST[0].code1", this.CREDNOLIST[0].code);
            this.formData.CREDNO = this.CREDNOLIST[0].code;
            // 可用额度
            this.CALAVAL = this.cardAccountInfo_3001.CALAVAL.toFixed(2);
            await this.getExecuteFun();
            // this.JudgeOverdue();
            // 当前用户只有一张卡 且挂了 个5009 的自动分期计划
            // this.JudgeInstallmentCard();
            //获取当前账户类型下 所有的卡 

            await this.getCardListOption(this.formData.CATEGORY);
            this.pageLoading = false;
        },
        // 判断是否可以做现金分期申请操作
        async getExecuteFun() {
            const Prouuct_index = (this.newCardInfo_3004.PRODUCT + '').trim();
            if (this.Card_STAT !== '') {
                this.$alert(
                    `当前卡片状态异常,不可做现金分期申请操作！`,
                    '现金分期申请提示',
                    { customClass: 'warning', type: 'warning', showClose: false },
                ).then(() => {
                    closePage(this.$route, this, 1);
                });
            };
            // 67 徽农卡, 94 消费分期卡
            const productList = ['67', '94'];
            await productList.forEach((item) => {
                console.log('item', item);
                if (Prouuct_index === item) {
                    this.$alert(
                        `当前卡产品为${this.PRODUCT_value},不可做现金分期申请操作！`,
                        '现金分期申请提示',
                        { customClass: 'warning', type: 'warning', showClose: false },
                    ).then(() => {
                        closePage(this.$route, this, 1);
                    });
                }
            });

            await this.JudgeOverdue();
        },
        // 判断是否逾期
        async JudgeOverdue() {
            // 24月内  发卡系统 逾期历史 2以上的数据
            const CUPAYM24_array = this.CUPAYM24.split('');
            const CUPAYM24_filter = CUPAYM24_array.filter(item => item > 0);
            console.log('CUPAYM24_filter', CUPAYM24_filter);
            if (CUPAYM24_filter.length >= 4) {
                this.$alert(
                    '累计逾期期数达到4次或超过了4次,不可做现金分期操作！',
                    '现金分期申请提示',
                    { customClass: 'warning', type: 'warning', showClose: false },
                ).then(() => {
                    closePage(this.$route, this, 1);
                });
            }
            const CUPAYM24_filter2 = CUPAYM24_filter.filter(item => item >= 2);
            console.log('CUPAYM24_filter2', CUPAYM24_filter2);
            if (CUPAYM24_filter2.length > 0) {
                this.$alert(
                    '连续逾期期数达到2次或超过了2次,不可做现金分期操作！',
                    '现金分期申请提示',
                    { customClass: 'warning', type: 'warning', showClose: false },
                ).then(() => {
                    closePage(this.$route, this, 1);
                });
            }
            await this.JudgeInstallmentCard()
        },
        // 当前用户只有一张卡 且挂了 个5009 的自动分期计划
        async JudgeInstallmentCard() {
            console.log('自动分期计划_CPNO', this.CreditCardService_3014.CPNO);
            if (this.cardList_3601.length === 1 && this.CreditCardService_3014.CPNO + '' === '5009') {
                this.$alert(
                    '当前卡为分期卡,无法办理现金分期！',
                    '现金分期申请提示',
                    { customClass: 'warning', type: 'warning', showClose: false },
                ).then(() => {
                    closePage(this.$route, this, 1);
                });
            }
            await this.JudgePageRule();
        },
        // 页面校验规则 不是强校验 只是提醒作用
        JudgePageRule() {
            // 需要增加账户有溢缴款、3001账面余额  临时额度（有效期内）3001的提醒  临时额度： TEMPLIMIT  临时额度生效日期： TLMTBEG 临时额度失效日期： TLMTEND
            const BALNCE = this.cardAccountInfo_3001.BALNCE;
            const BALNCEFlg = this.cardAccountInfo_3001.BALNCEFLG;
            const CALAVAL = this.CALAVAL;
            const [TEMPLIMIT, TLMTBEG, TLMTEND] = [this.cardAccountInfo_3001.TEMPLIMIT, this.cardAccountInfo_3001.TLMTBEG, this.cardAccountInfo_3001.TLMTEND];
            const newDate = moment().format('YYYYMMDD');
            console.log('newDate', newDate);
            console.log('TLMTBEG', TLMTBEG);
            console.log('TLMTEND', TLMTEND);
            if (BALNCEFlg == '-' && BALNCE > 0) {
                this.$alert(
                    '当前账户存在溢缴款，请注意！',
                    '现金分期申请提示',
                    { customClass: 'warning', type: 'warning', showClose: false },
                )
            }
            if (TEMPLIMIT > 0 || TLMTBEG > 0 || TLMTEND > 0) {
                // TLMTBEG = moment().format(TLMTBEG, 'YYYYMMDD');
                // TLMTBEG = moment().format(TLMTBEG, 'YYYYMMDD');
                //临时额度生效日期大于 当前日期     或  临时额度生效日期小于当前日期  且 临时额度失效日期大于当前日期
                if (moment(newDate).isBefore(TLMTBEG) || (moment(newDate).isBefore(TLMTEND) && moment(TLMTBEG).isBefore(newDate))) {
                    this.$alert(
                        '当前账户存在临时额度，请注意！',
                        '现金分期申请提示',
                        { customClass: 'warning', type: 'warning', showClose: false },
                    )
                }
            }
        },
        // 获取上次转账的卡号 3052 3052客户余额转移信息查询
        getCustomerInfo3052() {
            const appBody = {
                PINFLAG: this.pinFlag, // 是否检查密码标志 0-不检查
                CARDNBR: this.formData.CARDNBR, // 卡号
                INQOPT: '1',//查询方式
                PIN: '',
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = '3052';
            params.body.appBody = appBody;

            // 跑 3052 交易
            this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result -- 3052');
                    if (result.sysHead.rspCd === '000000') {
                        this.CustomerInfo_3052 = result.body.appBody;
                        console.log(' this.CustomerInfo_3052', this.CustomerInfo_3052);
                        this.formData.OUTCARDNBR = this.CustomerInfo_3052.CARDNAME.trim();
                        console.log(' this.formData.OUTCARDNBR', this.formData.OUTCARDNBR);
                    } else {
                        const ErrorMessage = `错误码：${result.sysHead.rspCd} ` + `错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, result.sysHead.busiName, { customClass: 'error', type: 'error' });
                    };
                }
            });
        },
        //获取当前账户类型下 所有的卡 
        getCardListOption(CATEGORY_val) {
            this.cardList_option = this.cardList_3601.filter((item) => (item.CATEGORY + '').trim() === CATEGORY_val);
            console.log(" this.cardList_option ", this.cardList_option);
        },
        // 选择 选中的需要操作的卡 后
        async getCARDNBRFun(cardNo) {
            // 更新 newCardInfo_3004 里的值
            await getCardInfo3004(cardNo, this);
            // 换卡后 默认卡 更换
            await this.getNew3004();
        },
        // // 获取信用计划编号的值
        async getCREDNOValue(val) {
            console.log('信用计划编号的值', val);
            // this.splitDictValue(val);
            await this.getInitData(val);
            this.splitStringValue();
        },

        // 查分分期期数和费率，手续费分摊方式 3-0.024-1,6-0.0468-1  
        // MPMONTH_list: '',//分期期数列表
        // MPFEE_list: '',//费率
        // 手续费支付方式
        splitStringValue() {
            const nbrMthsArray = this.IccMpprm.nbrMths.split(','); //期数
            const appFeeratioArray = this.IccMpprm.appFeeratio.split(',');//费率
            const interestRateArray = this.IccMpprm.interestRate.split(',');//利率
            const paytypeArray = this.IccMpprm.paytype.split(',');//手续费分摊方式
            const MPoption = [];
            nbrMthsArray.forEach((item, index) => {
                // const itemArray = item.split('-');
                console.log('nbrMthsArray', item, index);
                MPoption[index] = {
                    MPMONTH: item,//分期期数
                    MPFEE: appFeeratioArray[index],////费率
                    PMmethod: paytypeArray[index],//，手续费分摊方式
                    interest: interestRateArray[index],//利率
                    label: item + '期--费率:' + (appFeeratioArray[index] * 100).toFixed(2) + '%',
                }
            })
            this.MPMONTH_Option = JSON.parse(JSON.stringify(MPoption));
            console.log('MPMONTH_Option', this.MPMONTH_Option);
        },

        //   获取金额
        handleGetComputeMPAMT() {
            console.log('obj', this.formData.MPAMT);
            if (this.MPMONTH_Option_one) {
                this.handleGetComputeMP(this.MPMONTH_Option_one);
            }
        },

        // 多期数试算结果
        handleClicksuInfo() {
            if (this.formData.MPAMT.trim() === '') {
                this.$alert('请出入分期金额！', '提示', {
                    customClass: 'warning', type: 'warning',
                });
                return;
            }
            //1拆分字典值
            const trial = [];
            this.MPMONTH_Option.forEach((item) => {
                this.getTralDataList(item, trial);
            })
            console.log('trial', trial);
            this.TrialDataList = trial;
            console.log('TrialDataList期数列表', this.TrialDataList);
            this.DialogVisible = true;
        },
        // 拼装多种期数的费率数据结构
        getTralDataList(item, trial) {
            console.log('item', item);
            const MPFEENum = item.MPFEE * 1;//费率
            const MPAMT_value = (this.formData.MPAMT || 0) * 1; //分期金额
            const totalHandling = (MPFEENum * MPAMT_value).toFixed(2);//总手续费 费用总额
            const totalRepayment = (totalHandling * 1 + MPAMT_value).toFixed(2);//总还款额
            let monthlyPayment = 0;////每期分摊金额
            let FirstIssue = 0;//首期还款额 第一期分摊金额
            let monthlyPrincipal = 0;//每期分摊本金
            let monthlyCost = 0;//每期分摊费用

            // 每期分摊本金
            monthlyPrincipal = (MPAMT_value / item.MPMONTH).toFixed(2);
            if (item.PMmethod === "1") {
                // 每期手续费（分摊支付方式）

                //每期分摊费用   =  费用总额/ item.MPMONTH
                monthlyCost = (totalHandling / item.MPMONTH).toFixed(2);

                // 月还款额 每期分摊金额
                monthlyPayment = ((MPAMT_value / item.MPMONTH).toFixed(2) * 1 + (totalHandling / item.MPMONTH).toFixed(2) * 1).toFixed(2);
            } else {
                // 首期还款额  第一期分摊金额 = 每期分摊本金+费用总额
                FirstIssue = (MPAMT_value / item.MPMONTH).toFixed(2) * 1 + totalHandling;
            }
            const itemList = {
                MPMONTH: item.MPMONTH,//
                Bystages: MPAMT_value,//分期金额
                totalHandling: totalHandling,////总手续费 费用总额
                totalRepayment: totalRepayment,//总还款额
                rate: (MPFEENum * 100).toFixed(2) + '%',//费率
                monthlyPrincipal: monthlyPrincipal,//每期分摊本金
                monthlyCost: monthlyCost,//每期分摊费用
                FirstIssue: FirstIssue,//第一期分摊金额
                monthlyPayment: monthlyPayment,// 每期分摊金额
                interest: item.interest,//利率
            }
            console.log("itemList1111:", itemList);
            trial.push(itemList)
        },
        // 1、手续费支付方式。0：首期支付；1：分摊支付
        // 2、总手续费 = 费率*本金
        // 3、总还款额  = 总手续费+本金
        // 4、每期手续费（分摊支付方式） = 总手续费/分期期数
        // 5、月还款额（分摊支付方式）= 本金/分期期数+总手续费/分期期数

        // 6、如果是首期支付，首期还款额 = 本金/分期期数 + 总手续费
        // 	月还款额 = 本金/分期期数 
        // item.MPMONTH //分期期数
        // 获取分期期数 下拉选择数据
        handleGetComputeMP(item) {
            if (!this.formData.CREDNO) {
                this.$alert('信用计划编号为空，请先选择信用计划编号！', '提示', {
                    customClass: 'warning', type: 'warning',
                });
                return;
            }
            this.Trial_table = [];
            const MPFEENum = item.MPFEE * 1;//费率
            const MPMONTHNum = item.MPMONTH * 1;//期数
            this.MPMONTH_Option_one = item;
            console.log('item', item);
            const MPAMT_value = (this.formData.MPAMT || 0) * 1; //分期金额
            const totalHandling = (MPFEENum * MPAMT_value).toFixed(2);//总手续费
            const monthsPrincipal = (MPAMT_value / MPMONTHNum).toFixed(2);//每月本金、
            const monthlyService = (totalHandling * 1 / MPMONTHNum).toFixed(2);//每月手续费、
            this.totalHandling_Value = totalHandling;
            const totalRepayment = (totalHandling * 1 + MPAMT_value).toFixed(2);//总还款额
            let monthlyPayment = 0;
            console.log('item.PMmethod', item.PMmethod);
            if (item.PMmethod === "1") {
                // 每期手续费（分摊支付方式）
                // const EachIssue = (totalHandling / item.MPMONTH).toFixed(2);
                // 月还款额
                monthlyPayment = ((MPAMT_value / item.MPMONTH).toFixed(2) * 1 + (totalHandling / item.MPMONTH).toFixed(2) * 1).toFixed(2);
                // this.Trial_table = `首期还款额:${monthlyPayment}￥, 月还款额:${monthlyPayment}￥, 总手续费:${totalHandling}￥, 本金+手续费总额:${totalRepayment}￥`;
            } else {
                // 首期还款额
                const FirstIssue = (MPAMT_value / item.MPMONTH).toFixed(2) * 1 + totalHandling;
                // 月还款额
                monthlyPayment = (MPAMT_value / item.MPMONTH).toFixed(2);

                // this.Trial_table = `首期还款额:${FirstIssue}￥, 月还款额:${monthlyPayment}￥, 总手续费:${totalHandling}￥, 本金+手续费总额:${totalRepayment}￥`;
            }
            // 总还款额、总手续费、每月本金、每月手续费、每月还款额
            this.Trial_table.push({
                totalRepayment: parseFloat(totalRepayment).toFixed(2),//总还款额、
                totalHandling: parseFloat(totalHandling).toFixed(2),//总手续费、
                monthsPrincipal: parseFloat(monthsPrincipal).toFixed(2),//每月本金、
                monthlyService: parseFloat(monthlyService).toFixed(2),//每月手续费、
                monthlyPayment: parseFloat(monthlyPayment).toFixed(2),//每月还款额
            })
        },
        /**
         * 调核心接口1301查询储蓄卡账户信息
         */
        checkAcct() {

            if (this.formData.OUTCARDNBR.trim() === '') {
                this.$alert('请输入储蓄卡号！', '提示', {
                    customClass: 'error', type: 'error',
                });
                return;
            }
            const appBody = {
                CrdNo: this.formData.OUTCARDNBR, // 储蓄卡号
                ActNo: '', // 账号
                VerfPwdFlg: '0', //是否校验密码
                Pin: '',//密码

            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            params.body.appHead.tranCode = '1301';
            params.body.appBody = appBody;

            // 跑 3072 交易
            this.$post.common.esbtran(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) { // 接口请求成功
                    this.ifcheckacct = true;//已做过借记卡校验
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result -- 1301');
                    if (result.sysHead.rspCd === '000000') {
                        console.log("借记卡信息：", result.body.appBody);
                        console.log(result.body.appBody.IdentNo + "借记卡信息：" + this.cardInfo_3004.CUSTID);
                        //是否本人名下
                        if (result.body.appBody.IdentNo + '' != this.cardInfo_3004.CUSTID + '') {
                            this.$alert('储蓄卡非本人名下，不能办理此业务', '提示', {
                                customClass: 'error', type: 'error',

                            });
                            this.checkflag = true;
                            return;
                        }
                        //是否是一类户
                        if (result.body.appBody.ThrClCrdActFlg + '' === '3') {
                            this.$alert('储蓄卡为三类户，不能办理此业务', '提示', {
                                customClass: 'error', type: 'error',
                            });
                            this.checkflag = true;
                            return;
                        }

                        //状态是否正常
                        if ((result.body.appBody.AcctStsCd + '').indexOf('1') > 0) {
                            this.$alert('请注意与客户确认借记卡状态', '提示', {
                                customClass: 'error', type: 'error',
                            });
                            this.checkflag = true;
                            // return;
                        }
                        // if (result.body.appBody.ThrClCrdActFlg + '' === '2') {
                        //     console.log("二类户：", result.body.appBody.ThrClCrdActFlg);
                        //     this.$alert('储蓄卡为二类户，校验成功', '提示', {
                        //         customClass: 'success', type: 'success',
                        //     });
                        // } else {
                        //     this.$alert('储蓄卡校验成功', '提示', {
                        //         customClass: 'success', type: 'success',
                        //     });
                        // }
                        this.checkflag = false;
                        this.outCard = this.formData.OUTCARDNBR.trim();
                        this.updatecashinfo();
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspDesc}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error', type: 'error',
                        });
                        this.checkflag = true;
                    }
                } else {
                    this.$message.error('请求失败');
                    this.checkflag = true;
                }
            });
        },

        //验证成功之后改变借记卡号，申请按钮不可用，需重新验证借记卡号
        checkagain() {
            if (this.outCard === '') {
                return;
            }

            if (this.outCard !== '' && this.outCard !== this.formData.OUTCARDNBR.trim()) {
                this.checkflag = true;
            } else {
                this.checkflag = false;
            }
        },
        // 提交修改
        handleSubmit() {
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    console.log("this.selectedList.length", this.selectedList.length);
                    if (this.selectedList.length != this.speechList.length) {
                        this.$alert('话术尚未全部勾选！', '提示', {
                            customClass: 'warning', type: 'warning',
                        });
                        return;
                    }
                    this.DialogVisibleSuccess = true;
                }
            });
        },
        // 4075现金贷款/余额转移申请接口
        getCashLoanFun() {
            this.DialogVisibleSuccess = false;
            // 设置请求参数 -- 4075 交易
            const appBody = {
                // BLTRFREF: '23531316009',//撤销申请书编号
                OUTCARDNBR: this.formData.OUTCARDNBR,
                PINFLAG: this.pinFlag, // 是否检查密码标志 0-不检查
                CARDNBR: this.newCardInfo_3004.CARDNO, // 卡号
                OPERTP: '1',// '1', //操作类型 0－现金贷款/余额转移申请资料修改，1－现金贷款/余额转移申请，2－现金贷款/余额转移当日撤销，3—现金贷款/余额转移试算
                LOADFLAG: '1', // 放款方式
                CREDNO: this.formData.CREDNO, // 信用计划编号
                MPAMT: this.formData.MPAMT, // 分期金额
                NBRMTHS: this.MPMONTH_Option_one.MPMONTH, // 分期期数
                MPDRTYN: '1', // 强制通过 0:非强制通过 1:强制通过
                BTYPE: '0', // 业务类型 0:对私 1:对公
                // BUSNSAC: '0000000000', // 对公账号
                // BUSNSNA: '000000', // 对公单位名称
                //BLTRFREF: '23715327962',
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = '4075';
            params.body.appBody = appBody;

            // 跑 4075 交易
            this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result -- 4075');

                    if (result.sysHead.rspCd === '000000') {
                        this.cardinfo_4075 = result.body.appBody;
                        this.cardinfo_4075.rate = this.MPMONTH_Option_one.MPFEE;
                        //更新现金分期申请资料
                        this.cardAccountInfo_3001.CALAVAL = this.cardinfo_4075.CALAVAL;
                        console.log(' this.cardinfo_4075', this.cardinfo_4075);
                        this.isShowDialog = true;
                        this.get3001();
                    } else {
                        const ErrorMessage = `错误码：${result.sysHead.rspCd} ` + `错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, result.sysHead.busiName, { customClass: 'error', type: 'error' });
                    };
                }
            });
        },
        async get3001() {
            const defaultParamInfos = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParamInfos.body.appHead.tranCode = '3001';// 修改交易号
            defaultParamInfos.body.appBody = {
                PINFLAG: '0',
                PIN: '',
                CARDNO: this.newCardInfo_3004.CARDNO || this.cardInfo_3004.CARDNO,// 卡号
            }
            await this.$post.common.transPort(defaultParamInfos).then((res) => {
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    console.log(cardlossofs, '3001信用卡账户查询');
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        // 更新 vuex 缓存 卡账户信息
                        // this.cardAccountInfos_3001 =  cardlossofs.body.appBody;
                        let data = cardlossofs.body.appBody;
                        this.$store.commit('common/UPDATE_CARD_ACCOUNT_INFO', data);
                    }
                }
            });
        },
        //现金分期申请成功后，调4075交易更新客户现金分期申请资料
        updatecashinfo() {
            const appBody = {
                // BLTRFREF: '23531316009',//撤销申请书编号
                OUTCARDNBR: this.formData.OUTCARDNBR,
                PINFLAG: '0', // 是否检查密码标志 0-不检查
                CARDNBR: this.newCardInfo_3004.CARDNO, // 卡号
                OPERTP: '0',// '1', //操作类型 0－现金贷款/余额转移申请资料修改，1－现金贷款/余额转移申请，2－现金贷款/余额转移当日撤销，3—现金贷款/余额转移试算
                LOADFLAG: '', // 放款方式
                OUTBANKNAME: '徽商银行', //申请转入的银行卡银行名称
                OUTEXP: '', //申请转入的银行卡片有效期 
                OUTFLAG: 'C', // 申请转移的银行卡类型，C-本行，X-他行
                OUTBANK: '6440', //申请转入的银行卡银行行号
                BTYPE: '0', // 业务类型 0:对私 1:对公
                MPDRTYN: '0', // 对公账号
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = '4075';
            params.body.appBody = appBody;

            // 跑 4075 交易
            this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log('result4075', result);
                }
            });
        },
        // 获取分期计划对应的数据
        async getInitData(val) {
            let params = {
                pageNum: 1,
                pageSize: 10,
                itemNo: val,
            };
            await this.$post.MpprmPlan.pageIccMpprm(params).then((res) => {
                if (res.data.success) {
                    this.IccMpprm = res.data.content.records[0];
                    console.log('分期计划__IccMpprm', this.IccMpprm);
                } else {
                    this.$alert('分期计划数据请求失败', '提示', {
                        customClass: 'warning', type: 'warning',
                    });
                }

            });
        },
        // 点击跳转页面
        handleTurnPage() {
            const cardNo = this.formData.CARDNBR;
            console.log("cardNo", cardNo);
            this.$router.push({ name: 'cashInstUpdate', path: '/operationDeals/childItem/setAdditionalCard', params: { cardNo } });
        },

        // 点击关闭对话空框
        handleCloseDialog() {
            this.isShowDialog = false;
        },

        // // 切换分页大小
        // handleChangeSize(val) {
        //     this.pageSize = val;
        //     this.currentPage = 1;
        // },

        // // 切换页码
        // hanleChangeCurrentPage(val) {
        //     this.currentPage = val;
        // },

        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 1);
        },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.cashInstApply {
    .editForm {
        .el-form-item__content {
            text-align: left;

            /* .el-form-item-span {
                min-width: 230px;
                width: unset;
            } */
        }
        .checkClass {
            .el-form-item__content {
                line-height: 32px;
            }
        }
    }
}
</style>
<style scoped lang="scss">
.cashInstApply {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    .buttonBox {
        margin: 20px 0 0 0;
        padding-right: 30px;
        text-align: center;
    }
    .attention {
        line-height: 36px;
        color: #4780fe;
    }
}

.messageDialog {
    .el-row {
        margin-bottom: 30px;

        .infoItem {
            .title {
                font-weight: 600;
                padding-right: 10px;
            }

            .info {
                color: #999;
            }
        }
    }
}
</style>
